<template>
  <div>
    <van-card class="blog-m-article" :desc="article.content" :thumb="article.cover">
      <!-- 插槽简写 -->
      <template #title>
        <h3 class="blog-m-article--title">{{ article.title }}</h3>
      </template>
      <template #desc>
        <div class="blog-m-article--nickname">{{ nickName }}</div>
      </template>
      <template #num>
        <div >
          {{ date }}
        </div>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  name: "VueEleMArticleItem",
  props: {
    article: {
      type: Object,
    },
  },
  computed: {
    nickName() {
      return this.article.author?.nickName || "默认名称";
    },
    date() {
      return this.article.date.match(/(.+)年(.+)月(.+)日/)?.[0]
    }
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>
<style lang="stylus" 
>
.blog-m-article.van-card
  font-size .8em
  margin-top 2px
  background-color #fff
  
.blog-m-article--title {
  padding 8px 6px
  font-size: 1.6em;
  color #646566
}
.blog-m-article--nickname {
  padding 0 6px
  color #646566
}
</style>